<template>
  <template v-if="props.type === 'title'">
    <h1 v-html="meta.title"></h1>
    <p class="language-abstract" v-if="meta.abstract" v-html="meta.abstract"></p>
  </template>
  <template v-if="props.type === 'footer'">
    <div class="Learning-footer" v-if="meta.relatedLinks && meta.relatedLinks.length > 0">
      <p>参考：</p>
      <div class="relatedLinks-wrapper">
        <a v-for="a in meta.relatedLinks" :key="a" :href="a" target="_blank">{{ a }}</a>
      </div>
    </div>
  </template>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { toRef } from 'vue';

const props = defineProps({
  type: {
    type: String,
    require: true,
    default: 'title'
  }
});

const router = useRoute();
const meta = toRef(router, 'meta');
</script>

<style scoped lang="scss">

.Learning-footer {
  margin-top: 20px;
  display: flex;
  align-items: center;

  p {
    white-space: nowrap;
  }

  .relatedLinks-wrapper {
    flex: 1;
    overflow: hidden;
  }

  a {
    word-wrap: break-word;
    display: block;
  }
}
</style>
